import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:kxy_flutter_app/model/course.dart';
import 'package:kxy_flutter_app/view/course/course_detail_view.dart';

class CourseItemWidget extends StatelessWidget {
  final CourseProfile course;
  final Function(String) callback;

  const CourseItemWidget({
    Key key,
    @required this.course,
    @required this.callback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width / 2.5;
    var height = width / 1.7;
    return GestureDetector(
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(vertical: 15),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              color: Color.fromRGBO(240, 240, 240, 1),
            ),
          ),
        ),
        child: Container(
          height: height,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              imageWidget(width, height),
              Expanded(child: infoWidget()),
            ],
          ),
        ),
      ),
      onTap: () async {
        await Navigator.of(context).push(
          MaterialPageRoute(
            builder: (cxt) => CourseDetailView(courseId: course.id),
          ),
        );
        course.viewCount++;
        callback(course.id);
      },
    );
  }

  Widget imageWidget(double width, double height) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(5),
      child: Container(
        color: Color.fromRGBO(240, 240, 240, 1),
        child: CachedNetworkImage(
          width: width,
          height: height,
          fit: BoxFit.cover,
          imageUrl: course.imgUrl,
          errorWidget: (xct, _, __) => Container(
            width: width,
            height: height,
            color: Color.fromRGBO(240, 240, 240, 1),
            child: Center(child: Text('图片失效了~')),
          ),
        ),
      ),
    );
  }

  Widget infoWidget() {
    return Container(
      margin: EdgeInsets.only(left: 10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          titleWidget(),
          subTitleWidget(),
        ],
      ),
    );
  }

  Widget titleWidget() {
    return Container(
      child: RichText(
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        softWrap: true,
        text: TextSpan(children: [
          WidgetSpan(child: statusTagWidget()),
          TextSpan(
            text: course.title,
            style: TextStyle(
              fontSize: 15,
              color: Colors.black87,
              height: 1.2,
            ),
          ),
        ]),
      ),
    );
  }

  Widget statusTagWidget() {
    Color color;
    String text;
    if (course.status == CourseStatus.NotStarted) {
      color = Color.fromRGBO(255, 199, 110, 1);
      text = '未学习';
    }

    if (course.status == CourseStatus.Learning) {
      color = Color.fromRGBO(102, 211, 159, 1);
      text = '未完成';
    }

    if (course.status == CourseStatus.Completed) {
      color = Color.fromRGBO(91, 161, 252, 1);
      text = '已完成';
    }

    return Container(
      height: 17,
      width: 43,
      alignment: Alignment.center,
      margin: EdgeInsets.only(right: 5),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(0),
          topRight: Radius.circular(3),
          bottomLeft: Radius.circular(3),
          bottomRight: Radius.circular(3),
        ),
      ),
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: 11,
        ),
      ),
    );
  }

  Widget subTitleWidget() {
    var format = new DateFormat('yyyy-MM-dd');
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            Icon(Icons.date_range, size: 15, color: Colors.black45),
            Text(
              ' ' + format.format(course.publishDate),
              style: TextStyle(fontSize: 12, color: Colors.black45),
            ),
          ],
        ),
        Row(
          children: [
            Icon(Icons.headset, size: 15, color: Colors.black45),
            Text(
              ' ' + course.viewCount.toString() + '人在学',
              style: TextStyle(fontSize: 12, color: Colors.black45),
            ),
          ],
        ),
      ],
    );
  }
}
